<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { UserFilled, ChatDotRound, Position, MapLocation } from '@element-plus/icons-vue'

import BaseFrame from '@/components/BaseFrame.vue'

const page_title = ref('首页')

const block_margin_left = ref('256')
const block_width = ref('1200')

const router = useRouter()
const initGraph = () => {
  // 1 user number
  // @ts-ignore
  var user_number_echarts = echarts.init(document.getElementById('user-number-dom'))
  var option = {
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 50,
            name: '管理员',
            url: '/admins'
          },
          {
            value: 70,
            name: '地图管理员',
            url: '/mapadmins',
          },
          {
            value: 302,
            name: '普通用户',
            url: '/users'
          }
        ]
      }
    ]
  }
  user_number_echarts.setOption(option)
  user_number_echarts.on("click", (params) => {
    // @ts-ignore
    window.location.href = params.data.url
  })
}

const parkApis = [
  {
    name: '哈西服装城地下停车场',
    api: 'http://123.45.67.890/park-server'
  },
  {
    name: '哈西万达停车场',
    api: 'http://123.45.67.890/park-server'
  },
  {
    name: '哈尔滨西站地下停车场',
    api: 'http://123.45.67.890/park-server'
  }
]
interface BlockFormData {
  margin_left: string,
  width: string
}
const getBlockForm = (data: BlockFormData) => {
  block_margin_left.value = data.margin_left
  block_width.value = data.width
  console.log(data)
}

onMounted(() => {
  initGraph()
})
</script>

<template>
  <BaseFrame :page_title="page_title" @get-block-form_="getBlockForm" />
  <div class="block__" :style="{ marginLeft: block_margin_left + 'px', width: block_width, transition: '0.34s' }">
    <div>
      <el-row gutter="20" style="margin-block: 10px;">
        <el-col :span="12">
          <el-row gutter="10" style="margin-block: 10px;">
            <el-col :span="24">
              <el-card class="box-card" style="height: 400px;">
                <template #header>
                  <div class="card-header">
                    <span>用户数量</span>
                  </div>
                </template>
                <div>
                  <div id="user-number-dom" style="width: 100%; height: 300px;"></div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row gutter="10" style="margin-block: 10px;">
            <el-col :span="12">
              <el-card class="box-card" style="height: 198px; cursor: pointer;"
                @click.native="() => { router.push('/park/list') }">
                <div style="margin-top: 30px;">
                  <div style="text-align: center;">
                    <UserFilled style="width: 40px; height: 40px;" />
                  </div>
                  <div style="text-align: center; font-weight: bolder;">
                    入驻停车场数量
                  </div>
                  <div style="text-align: center; font-size: 30px; color: green;">
                    1000
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card" style="height: 198px; cursor: pointer;"
                @click.native="() => { router.push('/feedback') }">
                <div style="margin-top: 30px;">
                  <div style="text-align: center;">
                    <ChatDotRound style="width: 40px; height: 40px;" />
                  </div>
                  <div style="text-align: center; font-weight: bolder;">
                    新增用户反馈
                  </div>
                  <div style="text-align: center; font-size: 30px; color: green;">
                    3
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row gutter="10" style="margin-block: 10px;">
            <el-col :span="12">
              <el-card class="box-card" style="height: 198px; cursor: pointer;"
                @click.native="() => { router.push('/feedback/park-suggest') }">
                <div style="margin-top: 30px;">
                  <div style="text-align: center;">
                    <Position style="width: 40px; height: 40px;" />
                  </div>
                  <div style="text-align: center; font-weight: bolder;">
                    新增停车场建议
                  </div>
                  <div style="text-align: center; font-size: 30px; color: green;">
                    0
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card" style="height: 198px; cursor: pointer;"
                @click.native="() => { router.push('/park/map') }">
                <div style="margin-top: 30px;">
                  <div style="text-align: center;">
                    <MapLocation style="width: 40px; height: 40px;" />
                  </div>
                  <div style="text-align: center; font-weight: bolder; margin-top: 10px;">
                    停车场点位地图
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row gutter="10">
        <el-col :span="15">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>哈尔滨市卫星地图</span>
              </div>
            </template>
            <div>
              <el-image style="width: 705px; height: 300px;"
                src="https://apis.map.qq.com/ws/staticmap/v2/?size=705*300&key=2YKBZ-SVEWA-QL5KF-CHNTT-YBXAT-36FOZ&center=45.773816,126.618839&zoom=12&maptype=satellite" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="9">
          <el-card class="box-card" style="height: 400px;">
            <template #header>
              <div class="card-header">
                <span>当前接入停车场API</span>
              </div>
            </template>
            <div>
              <el-scrollbar height="400px">
                <el-table :data="parkApis" style="width: 100%">
                  <el-table-column prop="name" label="停车场" />
                  <el-table-column prop="api" label="系统接口" />
                </el-table>
              </el-scrollbar>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>